html {
	background: #eaeaea;
	height: 100%;
}

.wrap {
	position: relative;
	position: absolute;
	top: 300px;
	right: 0px;
	bottom: 0;
	left: 0;
	width: 300px;
	height: 300px;
	margin: auto;
	animation: move 5s infinite linear alternate;
}

@keyframes move {
	0% {
		transform: translate(-100%, -100%);
	}

	100% {
		transform: translate(150%, -50%);
	}

}

.cube {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	animation: rotate 20s infinite;
	animation-timing-function: linear;
}

@keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}

	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all .4s;
}


.photo {
	width: 200px;
	height: 200px;
}

.cube .liang-one {
	transform: rotateY(0deg) translateZ(100px);
}

.cube .liang-two {
	transform: translateZ(-100px) rotateY(180deg);
}

.cube .liang-three {
	transform: rotateY(90deg) translateZ(100px);
}

.cube .liang-four {
	transform: rotateY(-90deg) translateZ(100px);
}

.cube .liang-five {
	transform: rotateX(90deg) translateZ(100px);
}

.cube .liang-six {
	transform: rotateX(-90deg) translateZ(100px);
}


.cube span {
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}

.cube .liang-photo {
	width: 100px;
	height: 100px;
}

.cube .liang-front {
	transform: rotateY(0deg) translateZ(50px);
}

.cube .liang-back {
	transform: translateZ(-50px) rotateY(180deg);
}

.cube .liang-left {
	transform: rotateY(90deg) translateZ(50px);
}

.cube .liang-right {
	transform: rotateY(-90deg) translateZ(50px);
}

.cube .liang-top {
	transform: rotateX(90deg) translateZ(50px);
}

.cube .liang-bottom {
	transform: rotateX(-90deg) translateZ(50px);
}



.cube:hover .liang-one {
	transform: rotateY(0deg) translateZ(200px);
}

.cube:hover .liang-two {
	transform: translateZ(-200px) rotateY(180deg);
}

.cube:hover .liang-three {
	transform: rotateY(90deg) translateZ(200px);
}

.cube:hover .liang-four {
	transform: rotateY(-90deg) translateZ(200px);
}

.cube:hover .liang-five {
	transform: rotateX(90deg) translateZ(200px);
}

.cube:hover .liang-six {
	transform: rotateX(-90deg) translateZ(200px);
}

@keyframes carousel {
	0% {
		transform: rotateY(0deg);
	}

	25% {
		transform: rotateY(90deg);
	}

	50% {
		transform: rotateY(180deg);
	}

	75% {
		transform: rotateY(270deg);
	}

	100% {
		transform: rotateY(360deg);
	}
}

.time-display {
	position: absolute;
	top: 250px;
	left: 260px;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	/* semi-transparent white */
	color: #333;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	/* subtle shadow for 3D effect */
	border-radius: 5px;
	/* rounded corners */
	transition: background-color 0.3s ease-in-out;
	/* smooth background color change */

	/* Simple "card" styling */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100px;
	width: 200px;

	/* Text Styling */
	text-align: center;
	font-family: 'Roboto', sans-serif;
	/* you can change the font to any web-safe font or Google Font you prefer */
	font-size: 1.5em;
	font-weight: lighter;
}

.time-display:hover {
	background-color: rgba(0, 0, 0, 0.8);
	/* semi-transparent black when hovered */
	color: white;
}

.time-display h3 {
	margin: 0;
	font-size: 0.8em;
	font-weight: 300;
	text-transform: uppercase;
	/* makes the heading appear in caps */
}

body,
html {
	height: 100%;
	margin: 0;
}

.background-container {
	position: absolute;
	height: 70%;
	width: 84%;
	overflow: hidden;
}

.background-image {
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: contain;
	background-position: center;
	animation: background-fade 30s infinite;
	animation-fill-mode: forwards;
}

@keyframes background-fade {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	25% {
		opacity: 1;
	}

	45% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

.button-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;

}
